<template>
    <div id="add-staff">
      <form :model="formTop">
        <view class="f16 mt10 mb10">选择店铺</view>
        <picker @change="bindPickerChange" :value="index" :range="array">
          <view class="info-write flex align-center mt5">
            <span class="flex1 f15">{{array[index]}}</span><span class="iconfont pr5">&#xe694;</span>
          </view>
        </picker>
        <view class="f16 mt10 mb10">手机</view>
        <div class='info-write flex align-center '>
          <input placeholder="请输入手机号" v-model="formTop.userName"/>
          <i-button type="success" inline i-class="read-button">读取</i-button>
        </div>
        <view class="f16 mt10 mb10">姓名</view>
        <div class='info-write flex align-center '>
          <input placeholder="请输入员工姓名" type="number" maxlength="11" v-model="formTop.phone"/>
        </div>
        <view class="f16 mt10 mb10">选择职位</view>
        <picker @change="bindPickerChangeWay" :value="index" :range="arrayWay">
          <view class="info-write flex align-center mt5">
            <span class="flex1 f15">{{arrayWay[indexWay]}}</span><span class="iconfont pr5">&#xe694;</span>
          </view>
        </picker>
        <section class="mt15">
          <i-button long="true" type='success' @tap = "nextStep">新增</i-button>
        </section>
      </form>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'add-staff',
        data () {
          return {
            formTop: {storeArea: '', storePosition: '', storeDetail: '', position: ''},
            index: 0,
            imgSrc: [],
            array: ['退款退货', '退款', '退货'],
            indexWay: 0,
            arrayWay: ['原路退回', '原路退回', '原路退回'],
          };
        },
        methods: {
          bindPickerChange (e) {
            this.index = e.mp.detail.value;
          },
          bindPickerChangeWay (e) {
            this.indexWay = e.mp.detail.value;
          },
        }
    };
</script>

<style lang="stylus" scoped>
  #add-staff
      width 84%; margin 0 auto;
      .phone
            position relative;
  .store-info
    width 80%; margin 12% auto 0 auto;
  .info-write
    background #fff; padding 5px 0 5px 10px; border-radius 3px; height 40px; line-height 40px;
    input
      padding-left 5px; font-size 13px; flex 1;
</style>
<style lang="stylus">
  .read-button
    margin 0 5px 0 0 !important;
</style>
